<main *ngIf="!isLoading">

  <header>
    <div class="header-image-container">
      <img
        class="header-image"
        src="{{(playlistData.attributes.artwork ? playlistData.attributes.artwork.url : '') | formatArtworkUrl:500}}"
        alt="playlist-art"
      >
    </div>
    <div class="header">
        <div
          class="artwork"
          [ngStyle]="{'background-image':'url('+((playlistData.attributes.artwork ? playlistData.attributes.artwork.url : '')| formatArtworkUrl:170)+')'}"
        >
        </div>

        <div class="playlist-extras">
          <div class="track-text">
            <span class="playlist-name">{{playlistData.attributes.name}}</span>
            <span
              *ngIf="!isLibrary"
              class="playlist-curator-name">
              {{playlistData.attributes.curatorName}}
            </span>
            <span
              *ngIf="!isLibrary && playlistData.attributes.description"
              class="playlist-description">
              {{playlistData.attributes.description.short}}
            </span>
            <span class="runtime">
              {{ playlistData.relationships.tracks.data.length | i18nPlural: {'=1': '# song', 'other': '# songs'} }} • {{totalDuration | formatMillisecondsToText}}
            </span>
          </div>
          <div class="playlist-button-container">
            <button
              aria-label="Play playlist"
              class="playlist-button" mat-raised-button
              [ngStyle]="buttonStyling"
              (click)="playPlaylist()"
            >
              Play
            </button>
            <button
              aria-label="Shuffle playlist"
              class="playlist-button" mat-raised-button
              [ngStyle]="buttonStyling"
              (click)="playPlaylist(true)"
            >
              Shuffle
            </button>
            <button
            aria-label="More"
            [matMenuTriggerFor]="menu"
            [ngStyle]="buttonStyling"
            class="playlist-button-more" mat-raised-button
          >
            <mat-icon>more_horiz</mat-icon>
          </button>

          <mat-menu #menu="matMenu">
            <button
              aria-label="Play next"
              mat-menu-item
              [ngStyle]="buttonStyling"
              (click)="playNext()"
            >
              Play Next
            </button>
            <button
              aria-label="Play later"
              mat-menu-item
              [ngStyle]="buttonStyling"
              (click)="playLater()"
            >
              Play Later
            </button>
            <button
              class="copy-link-button"
              aria-label="Copy link"
              mat-menu-item
              [ngStyle]="buttonStyling"
              (click)="copyLink()"
            >
              Copy Link
            </button>
          </mat-menu>
          </div>
        </div>
    </div>
  </header>

  <section *ngIf="!containsVideos" [ngStyle]="{'background-image': 'linear-gradient(#04060c, ' + bgColor + ' 180%)'}">
    <div class="tracklist">
      <app-song
        *ngFor="let songData of playlistData.relationships.tracks.data; let i = index"
        [songData]="songData"
        (uponPlay)="playSong(i)"
      >
      </app-song>
    </div>
  </section>
</main>
<mat-spinner class="spinner" *ngIf="isLoading"></mat-spinner>